<template>
	<view class="comp-smithy">
		<view class="sider">
			<view :class="['menu',active == item.value ? 'active' : '']" v-for="(item,index) in menus" :key="index" @click="change(item.value)">{{item.name}}</view>
		</view>
		<view class="main">
			<comp-smithy-strengthen v-if="active == 'strengthen'"></comp-smithy-strengthen>
			<comp-smithy-recast v-if="active == 'recast'"></comp-smithy-recast>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex";
	import compEquipItem from "@/components/comp-equip-item/comp-equip-item"
	import compSmithyStrengthen from "@/components/comp-smithy/comp-smithy-strengthen.vue"
	import compSmithyRecast from "@/components/comp-smithy/comp-smithy-recast.vue"
	export default {
		name:"comp-smithy",
		components:{
			compEquipItem,
			compSmithyStrengthen,
			compSmithyRecast
		},
		computed : {
			...mapState(['mod_player']),
			player(){
				return this.mod_player.player
			}
		},
		data() {
			return {
				menus:[
					{name:'强化',value:'strengthen'},
					{name:'重铸',value:'recast'},
					{name:'附魔',value:'-1'}
				],
				active : 'strengthen'
			};
		},
		methods : {
			change(value){
				if(value == -1){
					uni.$emit('quick_message','敬请期待！')
					return;
				}
				this.active = value
			}
		}
	}
</script>

<style lang="scss">
	.comp-smithy{
		width:610px;
		height: 600px;
		display: flex;
		flex-direction: column;
		.sider{
			border-bottom: 1px solid #000;
			display: grid;
			grid-template-columns: repeat(5,1fr);
			padding:10px 0;
			.menu{
				border: 1px solid #000;
				margin:0 10px;
				height:30px;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: $game-color-2;
				cursor: pointer;
				&.active{
					background-color: $game-color-3;
				}
			}
		}
		.main{
			flex:1;
		}
		.back-pack{
			width:300px;
			border-left: 1px solid #000;
		}
	}
	
</style>